<template>
  <div class="app-container">
    <!-- Header 头部区域 -->
    <Header title="收藏"></Header>
    <!-- 循环渲染每一个商品的信息 -->
    <van-list
      class="info-list"
      :finished="true"
      finished-text="没有更多了"
    >
      <DishSearchInfo
        v-for="item in dishlist"
        :key="item.dish.id"
        :did="item.dish.id"
        :dishName="item.dish.dishName"
        :price="item.dish.price"
        :cover="item.dish.urls"
      ></DishSearchInfo>
    </van-list>
  </div>
</template>

<script>
// 导入需要的组件
import Header from "@/components/Header/Header.vue";
// 按需导入 API 接口
import { cartListAPI } from "@/api/orderAPI.js";
import DishSearchInfo from "@/components/Dish/DishSearchInfo.vue";

export default {
  name: "Cart",
  data() {
    return {
      // 用来存储收藏的列表数据，默认为空数组
      dishlist: [],
    };
  },
  created() {
    // 调用请求数据的方法
    this.initGoodsList();
  },
  methods: {
    // 封装请求列表数据的方法
    async initGoodsList() {
      // 调用 axios 的 get 方法，请求列表数据
      const {
        data: { success = false, errorMsg = "", data: res, total = 0 },
      } = await cartListAPI(this.queryForm);
      this.dishlist = res;
    }
  },
  components: {
    Header,
    DishSearchInfo
  },
};
</script>

<style lang="less" scoped>
.app-container {
  padding-top: 45px;
  padding-bottom: 50px;
}
</style>